<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <title>文件管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">

    <link th:href="@{/css/fileinput.css}" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link th:href="@{themes/explorer-fas/theme.css}" media="all" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div th:replace="~{commons/commons::topbar}"></div>

        <div class="container-fluid">
            <div class="row">
                <div th:insert="~{commons/commons::sidebar(active=FileList)}"></div>
                    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

                        <h2>
                            <button class="btn btn-sm btn-success btn-lg" data-toggle="modal" data-target="#upload">上传文件</button>
                            <!-- 按钮触发模态框 -->
                            <button class="btn btn-sm btn-warning btn-lg disabled">新建文件夹</button>
                            <button class="btn btn-sm btn-next btn-lg" onclick="goBack()" style="text-align: right" th:if="${param.folder ne 0 && param.folder ne null}">返回</button>
                        </h2>
                        <!-- 模态框（Modal） -->
                        <div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="myModalLabel">请选择文件</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                            <form enctype="multipart/form-data">
                                                <div class="file-loading">
                                                    <input id="file-zh" name="file" type="file" multiple>
                                                </div>
                                            </form>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>

                        <div class="table-responsive">
                            <table class="table table-striped table-sm">
                                <thead>
                                <tr>
                                    <th>文件编号</th>
                                    <th>文件名</th>
                                    <th>上级文件夹</th>
                                    <th>上传者</th>
                                    <th>上传时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="file:${files}">
                                    <td th:text="${file.getFid()}"></td>
<!--                                    <td th:text="${file.getFileName()}"></td>-->
                                    <td><a class="btn" th:href="@{'/download?'+'file='+${file.getFid()}}">[[${file.getFileName()}]]</a></td>
                                    <td th:text="${file.getFolderId()}"></td>
                                    <td th:text="${file.getUserId()}"></td>
                                    <!--file.department.getDepartmentNam 1e()-->
<!--                                    <td th:text="${file.department.getDepartmentName()}"/>-->
                                    <td th:text="${#dates.format(file.getUploadTime(),'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td  th:if="${#strings.containsIgnoreCase(#authentication.principal.Authorities,'admin')||file.getUserId() eq #authentication.name}">
                                        <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#rename" th:onclick="Values([[${file.getFid()}]],[[${file.getFileName()}]])">重命名</button>
                                        <button class="btn btn-sm btn-danger" th:onclick="del('delete?Fid=[[${file.getFid()}]]')" >删除</button>
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                            <table class="table table-striped table-sm">
                                <thead>
                                <tr>
                                    <th>文件夹ID</th>
                                    <th>文件夹名</th>
                                    <th>上级文件夹</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="folder:${folders}">
                                    <td th:text="${folder.getId()}"></td>
                                    <td><a class="btn" th:href="@{'/file?'+'folder='+${folder.getId()}}">[[${folder.getFolderName()}]]</a></td><!--转到文件夹下目录-->
                                    <td th:text="${folder.getParentId()}"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                    </main>


            </div>
        </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<!--    <script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js" crossorigin="anonymous"></script>-->
    <script th:src="@{/js/plugins/piexif.js}" type="text/javascript"></script>
    <script th:src="@{/js/plugins/sortable.js}" type="text/javascript"></script>
    <script th:src="@{/js/fileinput.js}" type="text/javascript"></script>
    <script th:src="@{/js/locales/zh.js}" type="text/javascript"></script>
    <script th:src="@{/themes/fas/theme.js}" type="text/javascript"></script>
    <script th:src="@{/themes/explorer-fas/theme.js}" type="text/javascript"></script>

    <script>
        $('#file-zh').fileinput({
            theme: 'fas',
            language: 'zh',
            uploadUrl: '/upload?folder='+GetQueryString("folder"),
            // previewSettings: {
            //     other: {width: "50px", height: "50px"},
            // }

        }).on("fileuploaded",function (event,data,msg) {
            alert(event.handleObj.handler.arguments[1].response.msg);
            location.reload();
        });
        function goBack(){
            (GetQueryString("folder")==="1")?location.replace("/file"):location.replace("/file?folder="+(GetQueryString("folder")-1));
        }
        function Values(ID,name) {
            $("#id").val(ID);
            $("#name").val(name);
        }
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return 0;}
        function del(url){
            var request = new XMLHttpRequest();
            request.open("POST", '/'+url);
            request.send();
            request.onreadystatechange=function(){
                if(request.readyState == 4 && request.status==200) alert(request.responseText);
                location.reload();
            }

        }
    </script>
    <div class="modal fade" id="rename" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">修改文件信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form role="form" class="form-group" th:action="@{/rename}" method="post">
                        <label class="col-sm-2 control-label">重命名</label>
                        <input type="hidden" name="Fid" id="id">
                        <input type="text" class="form-control" name="filename" id="name">
                        <label>移动至</label>
                        <select class="form-control" name="folder">
                            <option value=-1 th:text="不更改文件夹"></option>
                            <option value=0 th:text="根目录"></option>
                            <option th:each="folder:${folders}" th:value="${folder.getId()}" th:text="${folder.getFolderName()}"></option>
                        </select>
                        <button type="submit" class="btn btn-default">提交</button>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</body>
</html>